<template>
  <div style="marginLeft:20px;marginRight:20px">
    <el-input
      v-model="content"
      type="textarea"
      placeholder="请输入文字"
      style="width:500px"
    ></el-input>
    <el-button
      class="fabutton"
      type="primary"
      icon="el-icon-position"
      @click="release"
      >发布</el-button
    >
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="200px"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total ,prev, pager, next ,jumper"
        :page-size="pagesize"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { ReleaseAnnount, GetAnnount, DeleteAnnount } from "../../api/index"
export default {
  data() {
    return {
      pagesize: 10,
      total: 0,
      content: "",
      currentPage: 1,
      tableData: [],
    }
  },
  created() {
    this.getAnnount({ page: this.currentPage, limit: this.pagesize })
  },
  methods: {
    handleClick(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteAnnount({ _id: row._id }).then((res) => {
            if (res.status) {
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
              })
              this.getAnnount({ page: this.currentPage, limit: this.pagesize })
            } else {
              this.$notify.error({
                title: "错误",
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$notify.info({
            title: "消息",
            message: "已取消删除操作",
          })
        })
    },
    // 当页码改变时
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAnnount({ page: this.currentPage, limit: this.pagesize })
    },
    // 获取公告的方法
    getAnnount(data) {
      GetAnnount(data).then((res) => {
        this.tableData = []
        const { data, status, msg, count } = res
        if (status) {
          this.tableData.push(...data)
          this.total = count
        }
      })
    },
    // 发布公告
    release() {
      ReleaseAnnount({ content: this.content }).then((res) => {
        if (res.status) {
          this.getAnnount({ page: 1, limit: this.pagesize })
          this.content = ""
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          })
        } else {
          this.$notify.error({
            title: "错误",
            message: res.msg,
          })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-textarea {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.fabutton {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.page {
  margin: 10px 0px;
  text-align: right;
}
</style>
